
  <template>
	<view>
		<scroll-view scroll-x class=" nav">
			<view class="flex ">
				<view class="cu-item flex-sub" style="text-align:center">{{Title}}</view>
				<view class="cu-item flex-sub" style="text-align:center" :class="index==TabCur?'text-theme cur':''"
					v-for="(item,index) in DataList" :key="item.Value" @tap="tabSelect" :data-id="index">
					{{item.Name}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		GetObjectValue
	} from "@/utils/comm.js"
	export default {
		name: "tabSelect",
		data() {
			return {
				DataList: [],
				TabCur: 0
			};
		},

		props: {
			value: {
				type: [Number, String],
				default: ''
			},
			Title: {
				type: String,
				default: "未设置"
			},
			Url: {
				type: String,
				default: ""
			},
			BindName: {
				type: String,
				default: "Name"
			},
			BindValue: {
				type: String,
				default: "Id"
			},
			Where: {
				type: Object,
				default: {}
			}
		},
		mounted() {
			this.ListApi();
		},
		methods: {
			async ListApi() {
				let {
					Data: {
						Items
					}
				} = await this.$http.PostAsync(this.Url, this.Where);
				let DataList = [];
				DataList.push({
					Name: "不限",
					Value: null,
				});
				Items.forEach((item, index) => {
					DataList.push({
						Name: GetObjectValue(item, this.BindName),
						Value: GetObjectValue(item, this.BindValue),
					});
				});
				this.DataList = DataList;
				
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.$emit('input', this.DataList[this.TabCur].Value);
				this.$emit('SelectCallBack',  this.DataList[this.TabCur].Value);
			},

		}
	}
</script>

<style>

</style>
